<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <%--<link rel="stylesheet" type="text/css" href="/css/dept/deptManagement.css"/>--%>
    <link rel="stylesheet" type="text/css" href="/lib/easyui/themes/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="/css/news/center.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css/dept/new_news.css"/>
    <link rel="stylesheet" type="text/css" href="/css/budget/viewReport.css"/>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>

    <script type="text/javascript" charset="utf-8" src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/base/base.js"></script>
    <script type="text/javascript" charset="utf-8" src="/lib/layer/layer.js?20201106"></script>
    <script type="text/javascript" charset="utf-8" src="/lib/laydate/laydate.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/base/base.js"></script>
    <script type="text/javascript" charset="utf-8" src="/lib/pagination/js/jquery.pagination.min.js"></script>

    <title>文件管理</title>
    <style>
        .title span{
            font-size:18px;
            color:#494d59;
            padding-left:20px;
        }
        .title{
            border-bottom: 1px solid #9a9696;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1001;
            background: #fff;
            height:45px;
            line-height: 45px;
        }
        document,body{
            width:100%;
            height:100%;
        }

        .content{
            /*margin:20px auto 0px;
            margin-top: 26px;*/
            width:100%;
            height:100%;
        }
        .table table{
            width: 97%;
            margin:0 auto;
        }
        th{
            background-color: #fff;
            font-size: 15px;
            color: #2F5C8F;
            font-weight: bold;
            line-height:40px;
            text-align:left;
            padding-left:10px;
        }
        .titleName{
            cursor:pointer;
        }
        .red{
            color:red;
            font-weight:bold;
        }

        .M-box3 .active{
            margin: 0px 3px;
            width: 38px;
            height: 38px;
            line-height: 38px;
            background: #2b7fe0;
            font-size: 12px;
            border: 1px solid #2b7fe0;
            color:#fff;
            text-align:center;
            display: inline-block;
        }
        .M-box3 a{
            margin: 0 3px;
            width: 38px;
            height: 38px;
            line-height: 38px;
            font-size: 12px;
            display: inline-block;
            text-align:center;
            background: #fff;
            border: 1px solid #ebebeb;
            color: #333;
            text-decoration: none;
        }
        .M-box3{
            /*position: fixed;*/
            /*bottom: 10px;*/
            /*right: 60px;*/
            text-align: center
        }
        .M-box3 .jump-ipt{
            width: 38px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            padding: 0;
        }
        table thead tr th{
            font-size: 13px;
            text-align: center;
            /*border: 1px solid #666666;*/
            height: 40px;
            color: rgb(47, 92, 143);
            /*background-color: #00ccff;*/
        }
        table tbody tr td{
            font-size: 13pt;
            text-align: center;
            /*border: 1px solid #666666;*/
            font-size: 13px;
            color: #333;
        }
        table  td a{
            color: rgb(43, 127, 224);
        }
        .list td{
            text-align: center;
        }
        .list td a:hover{
            text-decoration: underline;
            color: #CC2222;
        }
        input[type="button"]#sel{
            position: absolute;
            right: 63px;
            top: 9px;
            font-size: 15px;
            background-color: #2b7fe0;
            border-radius: 3px;
            color: #fff;
            width: 70px;
            height: 31px;
            padding-left: 15px;
            /* text-align: center; */
            cursor: pointer;
            background: #2b7edf url(../../img/taisousuo.png) no-repeat 8px 8px;
        }
        #uploadTable tr:nth-child(2n+1) {
            background-color: rgb(246, 247, 249);
        }
        #uploadTable tr:nth-child(2n) {
            background-color: rgb(255, 255, 255);
        }
        #uploadTable tr {
            border-width: 1px;
            border-style: solid;
            border-color: rgb(192, 192, 192);
            border-image: initial;
        }
        #uploadTable tr:hover{
            background-color:#d3e6f9;
        }
        .clearfix:after {
            display: table;
            content: " ";
            clear: both;

        }
        .clearfix{
            line-height: 34px;
            margin-top: 0;
            height:34px;
        }
        .div_Img{
            float:left;
            margin-left: 16px;
        }
        .p1{
            float: left;
            margin-bottom: 0;
            height: 45px;
            padding-left: 10px;
            font-size: 18px;
            line-height: 45px;
            color: #333;
        }
        #u268{
            margin-top: 70px;
        }
        #base{
            margin-top: 62px;
        }
        table{
            /*width:1300px;*/
            margin: 0;
        }
        #u520{
            height: 350px;
        }
        #u519{
            width: 108px;
            height: 28px;
        }
        .inputsmall{
            width: 130px;
            text-align: left;
            padding-left: 5px;
        }
        #u648{
            left: 455px;
        }
        #u647{
            left: 444px;
            top:-8px;
        }
        #u671{
            left: 57px;
            top: 44px;
        }
        #u652{
            left: -65px;
            top: -44px;
        }

        #u670{
            left: -362px;
            top:11px;
        }
        #u651{
            left: 251px;
            top: 90px;
        }
        #u650{
            left: 237px;
            top: 48px;
        }
        #u518{
            left: 512px;
        }
        #u519{
            left: 700px;
        }
        #u519_input{
            left: -82px;
        }
        #u643{
            left: -180px;
            top: 10px;
        }
        #u641{
            left: 77px;
            top: -11px;
        }
        #u646{
            left: -175px;
            top: 10px;
        }
        #u644{
            left: 274px;
            top: -8px;
        }
        #u649{
            left: -31px;
            top: 10px;
        }
        #u672{
            left: 77px;
            top: 22px;
        }
        .checkbox_btn{
            left: 346px;
        }
        td:nth-child(3){
            text-overflow: clip;
            white-space: normal;
            line-height: 20px;
            word-wrap: break-word;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body>

<div class="content">
    <div class="title" >
        <div class="clearfix">
            <div class="div_Img">
                <img src="/img/newwenjian.png" style="vertical-align: middle;" alt="菜单主分类设置">
            </div>
            <p class="p1">文件管理</p>

        </div>
        <%--<span style="padding-left:26px;">文件管理</span>--%>
        <span style="position: absolute;right: 130px;top:0;"><input placeholder="请输入附件名称" id="wjgl" type="text" style="width: 125px;border-radius: 3px;display: none;"></span>
        <input id="sel" type="button" value="查询" style="display: none;"/>
    </div>
    <div id="base" class="">

        <!-- Unnamed (提交按钮) -->
        <div id="u518" class="ax_default _提交按钮">
            <input id="u518_input" type="button" value="查询"/>
        </div>

        <!-- Unnamed (提交按钮) -->
        <div id="u519" class="ax_default _提交按钮">
            <input id="u519_input" type="submit" value="批量下载"/>
        </div>

        <!-- Unnamed (表格) -->
        <div id="u520" class="ax_default _表格">
            <table id="uploadTable" style="width: 80%;margin: 0 auto;">
                <thead>
                <tr style="background:none">
                    <th style="width: 40px;"><input type="checkbox" class="checkbox allcheckbox" ischecked="false"></th>
                    <th style="width: 80px;">流水号</th>
                    <th style=" width: 26%;">流程名称</th>
                    <th style=" width: 50px;">发起人</th>
                    <th style="width: 10%;">发起部门</th>
                    <th style="width: 40px;">年份</th>
                    <th style="width: 17%;">预算项目</th>
                    <th style="width:28%">文件资料</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
            <%--分页按钮--%>
            <div class="row" style="margin-top: 20px;    margin-left: 10%;">
                <div class="pull-left" style="display:inline-flex;">
                    <span id="total"></span>
                    <span style="margin-left:5px;">每页显示
            <select id="forPage" style="width: 60px">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            条记录</span>
                </div>
                <div id="page1" class="pull-right"></div>
            </div>
            <div id="dbgz_page" class="M-box3 fr" style="    margin-top: -20px;
    margin-right: 9%;">


            </div>
        </div>

        <div id="u641" class="ax_default text_field">
            <input id="u641_input" placeholder="请选择项目名称" type="text" value=""/>
            <span class="sj"></span>

        </div>
        <div id="u672" class="ax_default text_field">


        </div>
        <div class="checkbox_btn">
            <div class="btn"><span id="confirm_btn">确定</span><span id="cancel_btn">取消</span></div>
        </div>
        <!-- Unnamed (矩形) -->
        <div id="u642" class="ax_default label">
            <div id="u642_div" class=""></div>
            <!-- Unnamed () -->
            <div id="u643" class="text" style="visibility: visible;">
                <p><span>项目名称：</span></p>
            </div>
        </div>
        <div id="u644" class="ax_default text_field">
            <label style="margin-left: 3px;">
                <input type="text" placeholder="请选择日期" id="budgetItemBegintime" class="inputsmall"
                       onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
            </label>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u645" class="ax_default label">
            <div id="u645_div" class=""></div>
            <!-- Unnamed () -->
            <div id="u646" class="text" style="visibility: visible;">
                <p><span>查询周期：</span></p>
            </div>
        </div>

        <!-- Unnamed (文本框) -->
        <div id="u647" class="ax_default text_field">
            <label style="margin-left: 3px;">
                <input type="text" placeholder="请选择日期" id="budgetItemEndtime" readonly="readonly"
                       onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" name="sendTime"
                       style="text-align: left;margin-right: 5px;width:130px;height:24px;padding-left:5px;outline: none;border: 1px solid rgb(221, 221, 221);border-radius: 6px">
            </label>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u648" class="ax_default label">
            <div id="u648_div" class=""></div>
            <!-- Unnamed () -->
            <div id="u649" class="text" style="visibility: visible;">
                <p><span>—</span></p>
            </div>
        </div>

        <!-- Unnamed (文本框) -->
        <div id="u650" class="ax_default text_field">
            <textarea id="u650_input" rows="5" value="" readonly="readonly" user_id=""/></textarea>
            <a href="javascript:;" class="btns addControls" data-type="1">添加</a>
            <a href="javascript:;" class="btns cleardate">清空</a>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u651" class="ax_default label">
            <div id="u651_div" class=""></div>
            <!-- Unnamed () -->
            <div id="u652" class="text" style="visibility: visible;">
                <p><span>申请人：</span></p>
            </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u653" class="ax_default label" style="visibility: hidden;">
            <div id="u653_div" class=""></div>
            <!-- Unnamed () -->
            <div id="u654" class="text" style="visibility: hidden;">
                <p><span>状态：</span></p>
            </div>
        </div>
        <div id="u655" class="ax_default _下拉列表框" style="visibility: hidden;">
            <select id="u655_input">
                <option value="" disabled selected style='display:none;'>请选择状态</option>
                <option value="0">待审批</option>
                <option value="1">已批准</option>
                <option value="2">未批准</option>
            </select>
        </div>
        <%--<div id="u656" class="ax_default text_field">
            <input id="u656_input" placeholder="请输入项目额度号" type="text" value=""/>
        </div>--%>

        <!-- Unnamed (矩形) -->
        <%--<div id="u657" class="ax_default label">
            <div id="u657_div" class=""></div>
            <!-- Unnamed () -->
            <div id="u658" class="text" style="visibility: visible;">
                <p><span>项目额度号：</span></p>
            </div>
        </div>--%>
        <!-- Unnamed (矩形) -->
        <div id="u659" class="ax_default label">
            <div id="u659_div" class=""></div>
            <!-- Unnamed () -->
            <div id="u670" class="text" style="visibility: visible;">
                <p><span>部门：</span></p>
            </div>
        </div>


        <div id="u671" class="ax_default text_field">
            <select id="u671_input" value=""/>
            </select>
        </div>

    </div>
    <%--<div class="table" id="u268" >--%>
    <%--<table id="uploadTable">--%>
    <%--<thead>--%>
    <%--<tr>--%>
    <%--<th><input type="checkbox" class="checkbox allcheckbox"></th>--%>
    <%--<th>序号</th>--%>
    <%--<th>工作名称</th>--%>
    <%--<th>项目名称</th>--%>
    <%--<th>xxxx</th>--%>
    <%--<th>附件名称</th>--%>
    <%--</tr>--%>
    <%--</thead>--%>
    <%--<tbody class="list" id="list1">--%>

    <%--</tbody>--%>
    <%--</table>--%>
    <%--</div>--%>

    <%--<div id="dbgz_page" class="M-box3">--%>

</div>
</div>
<script type="text/javascript">
    $(document).on('click', '.allcheckbox', function () {
        var ischecked = $(this).attr('ischecked');
        if (ischecked == 'true') {
            $('.kx').prop("checked", "");
            $(this).attr('ischecked', false);
        } else {
            $('.kx').prop("checked", "checked");
            $(this).attr('ischecked', true);
        }
    })
    //点击显示部门选择
    $('#u641').on('click', function () {
            $('#u672').css({display: 'block'});
            $('.checkbox_btn').css({display: 'block'})
        }
    );
    //点击确认时获取选中复选框的value
    $('#confirm_btn').on('click', function () {
        var obj = document.getElementsByName('projectname');
        var s = '';
        var id=""
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked){
                s += obj[i].value + ',';
                id += $(obj[i]).attr('id')+',';
            }
        }

        $('#u641_input').val(s);
        $('#u641_input').attr('typeId',id)
        $('#u672').css({display: 'none'});
        $('.checkbox_btn').css({display: 'none'})
    });
    $('#cancel_btn').on('click', function () {

        $('#u672').css({display: 'none'});
        $('.checkbox_btn').css({display: 'none'})

    })
    var checkboxs = '';
    var checkbox = '';
    $.ajax({
        type: 'get',
        url: '/budget/selAllBudget',
        dataType: 'json',
        success: function (res) {
            if (res.flag) {

                $.each(res.obj, function (index, item) {
                    checkboxs =
                        checkbox += '<p><label class="u672_txt"><input type="checkbox" name="projectname" lineNo="'+item.lineNo+'" id="'+item.budgetId+'" value=\'' + item.budgetItemName + '\'>' +item.lineNo+'--'+ item.budgetItemName + '</label></p>'
                })

                $('#u672').append(checkboxs)
            }
        },
        error: function () {

        },
        complete: function () {

        }
    });
    $('.addControls').click(function () {
        user_id = $(this).siblings('textarea').prop('id');
        $.popWindow("../common/selectUser");
    });
    $(document).on('click','.cleardate',function () {
        $(this).siblings('textarea').val('');
        $(this).siblings('textarea').attr('user_id','');
        $(this).siblings('textarea').attr('deptid','');
        $(this).siblings('textarea').attr('deptname','');
        $(this).siblings('textarea').attr('privid','');
        $(this).siblings('textarea').attr('userpriv','');
        $(this).siblings('textarea').attr('username','');
        $(this).siblings('textarea').attr('dataid','');
        $(this).siblings('textarea').attr('userprivname','');
    })

    //点击查询后，查询列表展示
    $(function () {
        $('#u671_input').deptSelect(function(){
            $('#u671_input option[value="-1"]').val('').attr('deptname','');
            var budgetItemName = $('#u641_input').val();
            var department = $('#u671_input option:selected').attr('deptname');
            var applicant = $('#u650_input').attr('user_id');
            var startDate = $('#budgetItemBegintime').val();
            var endDate = $('#budgetItemEndtime').val();
            var data1={
                page:1,//当前处于第几页
                pageSize:5,//一页显示几条
                useFlag:true,
                budgetItemName:budgetItemName,
                department:department,
                applicant:applicant,
                startDate:startDate,
                endDate:endDate
            };
            init(data1);
        });


        $("#u518_input").click(function () {
            var budgetItemName = $('#u641_input').attr('typeId')
            var department = $('#u671_input option:selected').val()
            var applicant = $('#u650_input').attr('user_id');
            var startDate = $('#budgetItemBegintime').val();
            var endDate = $('#budgetItemEndtime').val();
            var data1={
                page:1,//当前处于第几页
                pageSize:5,//一页显示几条
                useFlag:true,
                budgetItemName:budgetItemName,
                deptId:department,
                applicant:applicant,
                budgetItemBegindate:startDate,
                budgetItemEnddate:endDate
            };
            init(data1)
        })


        $('#u519').click(function(){

            for(var i=0;i<$('.kx').length;i++){
                if($('.kx').eq(i).parents('tr').find('.downloadA').length != 0){
                    atturl = $('.kx').eq(i).parents('tr').find('.downloadA').attr('href');
                    window.open(encodeURI(atturl));
                }
            }
        })
    })


    function init(data) {
        var ajaxPage={
            data:data,
            page:function () {
                var me=this;
                layer.msg('加载中', {
                    icon: 16
                    ,shade: 0.01
                });
                $.post('/budget/selBudgetAttachs',me.data,function (json) {
                    var str='';
                    var arr=json.datas;
                    if(arr.length == 0){
                        $('#u520 table tbody').html('')
                        $.layerMsg({content: '查询结果为空!', icon: 2});
                    }else{
                        for(var i=0;i<arr.length;i++){
                            if(arr[i].zipAttUrl == ''||arr[i].zipAttUrl == undefined){
                                var atturl  = '';
                                var checkbox = '<input type="checkbox" class="checkbox" disabled>';
                            }else{
                                var atturl = '<a class="downloadA"  href="/download?'+encodeURI(arr[i].zipAttUrl)+' ">'+ arr[i].zipAttachmentName +'</a>';
                                var checkbox = '<input type="checkbox" class="checkbox kx" >';
                            }
                            str+= '<tr>'+
                                '<td>'+checkbox+'</td>'+
                                '<td>'+arr[i].runId+'</td>'+
                                '<td><a target="_blank" href="/workflow/work/workformPreView?flowId='+arr[i].flowId+'&tableName=budget&runId='+arr[i].runId+'">'+arr[i].runName+'</a></td>'+
                                '<td>'+arr[i].createrName+'</td>'+
                                '<td>'+arr[i].deptName+'</td>'+
                                '<td>'+arr[i].year+'</td>'+
                                '<td>'+arr[i].budgetItemName+'</td>'+
                                '<td>'+atturl+'</td>'+
                                '</tr>'
                            $('#u520 table tbody').empty();
                            $('#u520 table tbody').html(str)
                            layer.closeAll();
                            me.pageTwo(json.total,me.data.pageSize,me.data.page)
                        }

                    }

                },'json')
            },

            pageTwo:function (totalData, pageSize,indexs) {
                var mes=this;
                $('#dbgz_page').pagination({
                    totalData: totalData,
                    showData: pageSize,
                    prevContent:'上一页',
                    nextContent:'下一页',
                    jump: true,
                    coping: true,
                    homePage:'',
                    endPage: '',
                    current:indexs||1,
                    callback: function (index) {
                        mes.data.page=index.getCurrent();
                        mes.page();
                    }
                });
            }
        }
        ajaxPage.page();

        $('#forPage').change(function(){
            ajaxPage.data.page = 1;
            ajaxPage.data.pageSize = $('#forPage').val();
            ajaxPage.page();
        })

    }


</script>
</body>


</html>

